<template>
  <t-space>
    <t-space direction="vertical">
      <t-tabs v-model="value1">
        <t-tab-panel value="first" label="选项卡1">
          <p style="padding: 25px">选项卡1</p>
        </t-tab-panel>
        <t-tab-panel value="second" label="选项卡2">
          <p style="padding: 25px">选项卡2</p>
        </t-tab-panel>
        <t-tab-panel value="third" label="选项卡3">
          <p style="padding: 25px">选项卡3</p>
        </t-tab-panel>
      </t-tabs>

      <t-tabs v-model="value2" theme="card">
        <t-tab-panel value="first" label="选项卡1">
          <p style="padding: 25px">选项卡1</p>
        </t-tab-panel>
        <t-tab-panel value="second" label="选项卡2">
          <p style="padding: 25px">选项卡2</p>
        </t-tab-panel>
        <t-tab-panel value="third" label="选项卡3">
          <p style="padding: 25px">选项卡3</p>
        </t-tab-panel>
      </t-tabs>

    </t-space>
  </t-space>

  <h3>自定义card</h3>
<!--  <t-space>-->
<!--    <t-space direction="vertical">-->

<!--      <t-tabs v-model="chooseTag" theme="card">-->

<!--        <t-tab-panel v-for="item of businessList" :value="item.business_name" :label="item.business_name">-->
<!--          <t-card v-for="dataitem of item.business_data_list">-->
<!--            {{dataitem.data_name}}-->
<!--          </t-card>-->
<!--        </t-tab-panel>-->
<!--      </t-tabs>-->
<!--    </t-space>-->
<!--  </t-space>-->

  <t-space>
    <t-space direction="vertical">
      <t-tabs v-model="chooseTag" theme="card" @click="ClickTab">
        <t-tab-panel v-for="item of businessList" :value="item.business_name" :label="item.business_name">
          <t-space break-line>
            <t-space v-for="dataitem of item.business_data_list">
              <t-card>
                <div >
                  <span>{{dataitem.data_name}}</span>
                  <t-divider layout="vertical" />
                  <t-checkbox>选择</t-checkbox>
                </div>
                <div>
                  <span>{{ dataitem.describe}}</span>
                </div>
              </t-card>
            </t-space>
          </t-space>
        </t-tab-panel>
      </t-tabs>
    </t-space>
  </t-space>
</template>

<script lang="ts" setup>
import {onMounted, ref, defineComponent, watch} from 'vue';
const value1 = ref('first');
const value2 = ref('first');
let businessList = [
  {
    "id": 1,
    "business_name": "访客",
    "business_data_list": [{
      "id": 1,
      "business_id": 1,
      "data_name": "电子访客",
      "describe": "访客来访数据"
    },
      {
        "id": 2,
        "business_id": 1,
        "data_name": "自助机",
        "describe": "访客来访数据"
      },
      {
        "id": 9,
        "business_id": 1,
        "data_name": "电子访客",
        "describe": "测试链接"
      },
      {
        "id": 15,
        "business_id": 1,
        "data_name": "2023年电子访客预约单记录",
        "describe": "导出内容：2023年电子访客预约单记录"
      }
    ]
  },
  {
    "id": 2,
    "business_name": "餐饮",
    "business_data_list": [{
      "id": 3,
      "business_id": 2,
      "data_name": "餐饮订单数据",
      "describe": "内容"
    },
      {
        "id": 12,
        "business_id": 2,
        "data_name": "离职名单消费明细",
        "describe": "导出内容：user_no，user_name，(order_amount/100)，deal_time，pay_channel"
      },
      {
        "id": 13,
        "business_id": 2,
        "data_name": "早餐",
        "describe": "导出内容：时间,餐厅 餐线, 菜品名,价格, 销量 "
      }
    ]
  },
  {
    "id": 3,
    "business_name": "会议室",
    "business_data_list": [{
      "id": 4,
      "business_id": 3,
      "data_name": "会议室预订数据",
      "describe": "内容"
    },
      {
        "id": 16,
        "business_id": 3,
        "data_name": "celinehuang会议室数据",
        "describe": "导出内容：celinehuang会议室数据"
      }
    ]
  },
  {
    "id": 4,
    "business_name": "班车",
    "business_data_list": [{
      "id": 5,
      "business_id": 4,
      "data_name": "班车去重人数",
      "describe": "背景描述"
    },
      {
        "id": 6,
        "business_id": 4,
        "data_name": "班车上座率",
        "describe": "背景描述"
      },
      {
        "id": 7,
        "business_id": 4,
        "data_name": "班车线路数",
        "describe": "背景描述"
      },
      {
        "id": 10,
        "business_id": 4,
        "data_name": "PCG人力外包",
        "describe": "导出内容手动阀手动阀撒法是否大撒法大使"
      },
      {
        "id": 11,
        "business_id": 4,
        "data_name": "PCG人力外包",
        "describe": "导出内容：id,card_no,shuaka_time,staff_name,route_name,station_name,trade_type,manager_unit_name,manager_unit_type_name,staff_subtype_name,staff_type_name,city_name,bg,work_dept_name"
      }
    ]
  },
  {
    "id": 5,
    "business_name": "门禁",
    "business_data_list": [{
      "id": 8,
      "business_id": 5,
      "data_name": "门禁记录",
      "describe": "背景描述"
    },
      {
        "id": 14,
        "business_id": 5,
        "data_name": "固定人员门禁记录",
        "describe": "导出内容：junxhuang，pawngao员工2021年1月至今门禁信息"
      },
      {
        "id": 17,
        "business_id": 5,
        "data_name": "heartliu(刘鑫)门禁记录",
        "describe": "导出内容：heartliu(刘鑫)从2018-03-21至今的门禁记录"
      }
    ]
  },
  {
    "id": 6,
    "business_name": "腾讯协会",
    "business_data_list": [{
      "id": 18,
      "business_id": 6,
      "data_name": "瑜你协会签到据",
      "describe": "导出内容：时间,活动名称,签到人数"
    }]
  }
]

let chooseTag = ref("")

onMounted( () => {

})



</script>